<template>
  <a-modal
    title="映射关系"
    :width="800"
    :visible="visible"
    :confirm-loading="confirmLoading"
    :mask-closable="false"
    :align-center="true"
    :unmount-on-close="true"
    ok-text="确认"
    @ok="handleOk"
    @cancel="close"
    :body-style="{ 'max-height': '700px', overflow: 'auto' }"
  >
    <variable-selection
      :var-options="nameList"
      v-if="visible && varVisible"
    ></variable-selection>
    <a-spin :spinning="confirmLoading">
      <a-form ref="form" :model="form" :rules="rules">
        <a-row :gutter="[32, 0]">
          <a-col :md="12" :sm="24">
            <h3>入参</h3>
            <a-form-item
              v-for="(value, key) in form.inputParam"
              :key="key"
              :label="getKeyLabel(key)"
            >
              <a-select
                v-model="form.controlTypeObj[key]"
                style="width: 33%; margin-right: 2%"
                @change="form.inputParam[key] = ''"
              >
                <a-option value="">选择字段</a-option>
                <a-option value="input">手填</a-option>
                <a-option value="editor">富文本</a-option>
              </a-select>
              <a-textarea
                v-if="form.controlTypeObj[key] === 'editor'"
                v-model="form.inputParam[key]"
                :auto-size="{ minRows: 4 }"
                placeholder="请输入内容"
                style="width: 65%"
              />
              <a-input
                v-else-if="
                  form.controlTypeObj[key] === 'input' &&
                  form.controlTypeObj[key] !== 'hide'
                "
                v-model="form.inputParam[key]"
                style="width: 65%"
              ></a-input>
              <a-select
                v-else
                v-model="form.inputParam[key]"
                :allow-clear="true"
                style="width: 65%"
                placeholder="请输入，可为空"
                @change="changEmptyParam($event, 'inputParam', key)"
              >
                <a-option
                  v-for="nameObj in nameList"
                  :key="nameObj.value"
                  :value="nameObj.value"
                  >{{ nameObj.label }}
                </a-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="12" :sm="24">
            <h3>出参</h3>
            <a-form-item
              v-for="(value, key) in form.outputParam"
              :key="key"
              :label="key"
            >
              <a-select
                v-model="form.outputParam[key]"
                :allow-clear="true"
                style="min-width: 200px"
                placeholder="请输入，可为空"
                @change="changEmptyParam($event, 'outputParam', key)"
              >
                <a-option
                  v-for="nameObj in nameList"
                  :key="nameObj.value"
                  :value="nameObj.value"
                  >{{ nameObj.label }}
                </a-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form></a-spin
    >
  </a-modal>
</template>
<script>
import VariableSelection from "@/components/Form/Custom/VariableSelection.vue";
import _ from "lodash";

export default {
  components: { VariableSelection },
  props: {
    dataConfig: {
      type: Array,
      default: () => [],
    },
  },
  computed: {
    form() {
      return this.dataConfig[this.current]?.plugInfo.plugParamIODTO || {};
    },
    nameList() {
      return this.dataObj.pageData
        .concat(this.dataObj.defaultKeys)
        .filter((item) => item.formData.dataIndex && item.formData.name)
        .map((item) => ({
          label: item.formData.name,
          value: item.formData.dataIndex,
        }));
    },
  },
  watch: {
    visible(newVal) {
      setTimeout(() => {
        this.varVisible = newVal; // 给变量按钮一个缓冲显示的时间
      }, 400);
    },
  },
  data() {
    return {
      visible: false,
      varVisible: false,
      confirmLoading: false,
      current: 0,
      rules: {},
      plugExpression: [],
    };
  },
  inject: ["dataObj"],
  methods: {
    getKeyLabel(key) {
      if (/gp\d{6}/.test(key)) {
        // 后缀
        const groupId = /^gp/.test(key) ? key.slice(0, 8) : key.slice(0, 12);
        const columnKey = /^gp/.test(key) ? key.slice(8) : key.slice(12);
        const configInfo =
          this.dataConfig[this.current]?.plugInfo.plugParamIODTO
            ?.allParamInfo?.[groupId + columnKey];
        if (
          configInfo &&
          _.isArray(configInfo.between) &&
          configInfo.between.length
        ) {
          const index = configInfo.between.findIndex(
            (item) => item.queryKey === columnKey
          );
          return index === 0
            ? configInfo.columnKey + "(最小值)"
            : configInfo.columnKey + "(最大值)";
        } else {
          console.log(configInfo, "条件组");
          return columnKey;
        }
      } else {
        return key;
      }
    },
    changEmptyParam(e, key1, key2) {
      if (!e) {
        this.form[key1][key2] = "";
      }
    },
    handleOk() {
      this.visible = false;
    },
    async open(current) {
      this.visible = true;
      this.current = current; // 获取下标
    },
    close() {
      this.visible = false;
    },
  },
  created() {},
};
</script>
<style lang="less" scoped>
/* 富文本样式 */
/deep/ .ql-container {
  height: 200px;
  width: 100%;
}
</style>
